﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Metropolis Shortcodes</title>
        <meta name="description" content="Multipurpose HTML5 Themplate">
        <meta name="author" content="pixel-industry">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width">


        <!-- stylesheets -->
        <link rel="stylesheet" href="css/basic.css" />
        <link rel="stylesheet" href="css/style.css" />   
        <link rel="stylesheet" href="css/responsive.css" />  
        <link rel="stylesheet" href="css/red.css" />

        <!-- Fonts -->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic' rel='stylesheet' type='text/css'>

        <!-- Icons -->
        <link rel="stylesheet" href="pixons/style.css" />
        <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />

        <link rel="stylesheet" href="style-switcher/styleSwitcher.css" media="screen" />

        <!--[if lt IE 9]>
            <script src="js/html5shiv.js"></script>
        <![endif]-->

        <!--[if lt IE 9]>
            <script src="js/selectivizr-min.js"></script>
        <![endif]-->

        <!--[if IE 8]>
            <link rel="stylesheet" href="css/ie8.css" media="screen" />
        <![endif]-->
    </head>

    <body>
        <!-- style switcher start -->
        <section id="style-switcher">
            <section id="styles-container">
                <section>
                    <h6>Layouts</h6>
                    <ul class="skin-list">
                        <li class="metropolis-default"><a href="../metropolis-default/shortcodes.html">Default</a></li>
                        <li class="metropolis-clean active"><a href="#">Clean & Minimal</a></li>
                        <li class="metropolis-blue"><a href="../metropolis-blue/shortcodes.html">Creative Blue</a></li>
                    </ul>
                </section>

                <section class="first">
                    <h6>Color Style</h6>
                    <p>Which theme color you want to use? Here are some predefined colors.</p>
                    <ul class="styles-list">
                        <li class="blue">1</li>
                        <li class="green">2</li>
                        <li class="orange">3</li>                        
                        <li class="red">4</li>
                        <li class="yellow">5</li>
                    </ul>
                </section>
            </section>
            <a href="#" id="styles-button"><div id="switcher-logo"></div></a>
        </section><!-- style switcher end -->

        <!-- #header-wrapper start -->
        <section id="header-wrapper" class="clearfix">
            <!-- #header start -->
            <header id="header" class="clearfix">

                <!-- #logo start -->
                <section id="logo">
                    <a href="index.html">
                        <img src="img/red/logo.png" alt="logo" />
                    </a>
                </section><!-- #logo end -->

                <!-- contact-info-container -->
                <section id="contact-info-container">
                    <ul class="info">
                        <li>
                            <span class="text-dark">Call us on:</span> +00 123 5874
                        </li>

                        <li>
                            <span class="text-dark">Email: </span>
                            <a class="text-color" href="malito:sales-info@business.com">sales-info@business.com</a>
                        </li>
                    </ul><!-- .info end -->

                    <ul class="social-links">
                        <li>
                            <a href="#" class="pixons-twitter-1"></a>
                        </li>

                        <li>
                            <a href="#" class="pixons-linkedin"></a>
                        </li>

                        <li>
                            <a href="#" class="pixons-facebook-1"></a>
                        </li>

                        <li>
                            <a href="#" class="pixons-xing"></a>
                        </li>

                        <li>
                            <a href="#" class="pixons-skype"></a>
                        </li>
                    </ul><!-- .social-links end -->
                </section><!-- .contact-info-container end -->
            </header><!-- #header end -->

            <!-- #nav-container start -->
            <section id="nav-container">

                <section class="container_12">
                    <section class="grid_12">
                        <!-- #nav start -->
                        <nav id="nav">
                            <ul>
                                <li>
                                    <span class="nav-icon icon-home"></span>
                                    <a href="index.html">Home</a>
                                </li>

                                <li>
                                    <span class="nav-icon icon-user"></span>
                                    <a href="#">Pages</a>
                                    <ul>
                                        <li><a href="about.html">About</a></li>
                                        <li><a href="services.html">Services</a></li>
                                        <li><a href="faq.html">FAQ</a></li>
                                        <li><a href="page-sidebar-left.html">Page sidebar left</a></li>
                                        <li><a href="page-sidebar-right.html">Page sidebar right</a></li>
                                        <li><a href="pricing.html">Pricing tables</a></li>
                                    </ul>
                                </li>

                                <li>
                                    <span class="nav-icon icon-camera"></span>
                                    <a href="#">Portfolio</a>
                                    <ul>
                                        <li><a href="portfolio1.html">Portfolio 1</a></li>
                                        <li><a href="portfolio2.html">Portfolio 2</a></li>
                                        <li><a href="portfolio2-alt.html">Portfolio 2 alternative</a></li>
                                        <li><a href="portfolio3.html">Portfolio 3</a></li>
                                        <li><a href="portfolio3-alt.html">Portfolio 3 alternative</a></li>
                                        <li><a href="portfolio4.html">Portfolio 4</a></li>
                                        <li><a href="portfolio4-alt.html">Portfolio 4 alternative</a></li>
                                        <li><a href="portfolio-gallery.html">Portfolio gallery</a></li>
                                        <li><a href="portfolio-single.html">Portfolio single</a></li>
                                    </ul>
                                </li>

                                <li>
                                    <span class="nav-icon icon-list"></span>
                                    <a href="#">Blog</a>

                                    <ul>
                                        <li><a href="blog.html">Blog default</a></li>
                                        <li><a href="blog-alt.html">Blog alternative</a></li>
                                        <li><a href="blog-single.html">Blog single</a></li>
                                    </ul>
                                </li>

                                <li class="current-menu-item">
                                    <span class="nav-icon icon-cogs"></span>
                                    <a href="#">Shortcodes</a>
                                    <ul>
                                        <li class="current-menu-item"><a href="shortcodes.html">Page elements</a></li>
                                        <li><a href="#">Third level</a>
                                            <ul>
                                                <li><a href="#">Menu item</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>

                                <li>
                                    <span class="nav-icon icon-map-marker"></span>
                                    <a href="contact.html">Contact</a>
                                </li>
                            </ul>
                        </nav><!-- #nav end -->

                        <!-- responsive navigation start -->
                        <select id="nav-responsive">
                            <option selected="" value="">Site Navigation...</option>

                            <option value="index.html">Home version 1</option>

                            <option value="about.html">About us</option>
                            <option value="services.html">Services</option>
                            <option value="faq.html">FAQ Page</option>
                            <option value="page-sidebar-left.html">Page sidebar left</option>
                            <option value="page-sidebar-right.html">Page sidebar right</option>
                            <option value="pricing.html">Pricing tables</option>

                            <option value="portfolio1.html">Portfolio 1 column</option>
                            <option value="portfolio2.html">Portfolio 2 columns</option>
                            <option value="portfolio2-alt.html">Portfolio 2 alternative</option>
                            <option value="portfolio3.html">Portfolio 3 columns</option>
                            <option value="portfolio3-alt.html">Portfolio 3 alternative</option>
                            <option value="portfolio4.html">Portfolio 4 columns</option>
                            <option value="portfolio4-alt.html">Portfolio 4 alternative</option>
                            <option value="portfolio-gallery.html">Portfolio gallery</option>
                            <option value="portfolio-single.html">Portfolio single</option>

                            <option value="blog.html">Blog default</option>
                            <option value="blog-alt.html">Blog alternative</option>
                            <option value="blog-single.html">Blog single</option>

                            <option value="shortcodes.html">Shortcodes</option>
                            <option value="contact.html">Contact</option>
                        </select><!-- responsive navigation end -->

                        <!-- #search-box start -->
                        <section id="search-box">
                            <form action="#" method="get">
                                <input id="m_search" name="s" type="text" placeholder="Type and hit enter..." />
                                <input class="search-submit" type="submit" />
                            </form>
                        </section><!-- #search-box end -->
                    </section><!-- .grid_12 end -->
                </section><!-- .container_12 end -->

            </section><!-- #nav-container end -->
        </section><!-- 3header-wrapper end -->

        <!-- .top-shadow -->
        <div class="top-shadow"></div>

        <!-- .page-title-container start -->
        <section class="page-title-container">

            <!-- .container_12 start -->
            <div class="container_12">

                <!-- .page-title start -->
                <div class="page-title grid_12">
                    <div class="title">
                        <h1>Shortcodes</h1>
                    </div>

                    <ul class="breadcrumbs">
                        <li><a  class="home" href="#">Home</a></li>
                        <li>/</li>
                        <li><span class="active">Shortcodes</span></li>
                    </ul>
                </div><!-- .page-title end -->
            </div><!-- .container_12 end -->
        </section><!-- .page-title-container end -->

        <!-- #content-wrapper start -->
        <section id="content-wrapper">

            <!-- .container_12 start -->
            <div class="container_12">

                <!-- .grid_4 start -->
                <article class="grid_4">

                    <!-- .section-title.left start -->
                    <section class="section-title left">
                        <h3>Dropcaps</h3>
                    </section><!-- .section-title.left end -->

                    <p>
                        <span class="dropcap-color">V</span>
                        It is a long established fact that a reader will be 
                        distracted by the readable content of a page. It is 
                        a long established fact that a reader will be 
                        distracted by the readable content of a page. 
                    </p>

                    <br />

                    <p>
                        <span class="dropcap">V</span>
                        It is a long established fact that a reader will be 
                        distracted by the readable content of a page. It is 
                        a long established fact that a reader will be 
                        distracted by the readable content of a page.
                    </p>
                </article><!-- .grid_4 end -->

                <!-- .grid_4 start -->
                <article class="grid_4">

                    <!-- .section-title.left start -->
                    <section class="section-title left">
                        <h3>Testimonials</h3>
                    </section><!-- .section-title.left end -->

                    <!-- .carousel-testimonial start -->
                    <section class="carousel-testimonial">
                        <ul id="foo2" class="carousel-li">
                            <li>
                                <p class="content">
                                    Lorem ipsum dolor sit amet, 
                                    consectetuer adipiscing elit, 
                                    sed diam nonummy nibh euismod 
                                    tincidunt ut laoreet dolore magna 
                                    aliquam erat volutpat. Ut wisi enim 
                                    ad minim veniam, quis nostrud.
                                </p>

                                <span class="author">- John Doe, business.com</span>
                            </li>

                            <li>
                                <p class="content">
                                    Sed ut perspiciatis unde omnis iste natus error 
                                    sit voluptatem accusantium doloremque laudantium, 
                                    totam rem aperiam, eaque ipsa quae ab illo 
                                    inventore veritatis et quasi. 
                                </p>

                                <span class="author">- Mathew, business.com</span>
                            </li>

                            <li>
                                <p class="content">
                                    Lorem ipsum dolor sit amet nec, 
                                    consectetuer adipiscing elit. Aenean 
                                    commodo ligula eget dolor. Aenean
                                    massa. Cum sociis natoque penatibus 
                                    et magnis dis parturient montes. 
                                    Lorem ipsum dolor sit amet nec, 
                                    consectetuer adipiscing elit. 
                                    Aenean commodo ligula eget dolor. 
                                </p>

                                <span class="author">- John Stark, business.com</span>
                            </li>
                        </ul><!-- .carousel-li end -->
                    </section> <!-- .carousel-testimonial end -->
                </article><!-- .grid_4 end -->

                <!-- .grid_4 start -->
                <article class="grid_4">
                    <!-- .section-title.left start -->
                    <section class="section-title left">
                        <h3>Testimonial Alternative</h3>
                    </section><!-- .section-title.left end -->

                    <section class="testimonials-alternative">
                        <ul class="testimonials-alternative-nav">
                            <li><a href="#content-1" class="active"><img src="img/about/testimon-1.jpg" alt="testimonial 1" /></a></li>
                            <li><a href="#content-2"><img src="img/about/testimon-2.jpg" alt="testimonial 2" /></a></li>
                            <li><a href="#content-3"><img src="img/about/testimon-3.jpg" alt="testimonial 3" /></a></li>
                            <li><a href="#content-4"><img src="img/about/testimon-4.jpg" alt="testimonial 4" /></a></li>
                        </ul>

                        <section class="testimonials-alternative-content">
                            <div id="content-1" class="content active">
                                <p class="text">
                                    Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem investigationes.
                                </p>
                                <p class="author">- Mark Mathewson, info@business.com</p>
                            </div>
                            <div id="content-2" class="content">
                                <p class="text">
                                    Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
                                </p>
                                <p class="author">- Mark Mathewson, info@business.com</p>
                            </div>
                            <div id="content-3" class="content">
                                <p class="text">
                                    Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
                                </p>
                                <p class="author">- Mark Mathewson, info@business.com</p>
                            </div>
                            <div id="content-4" class="content">
                                <p class="text">
                                    Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. 
                                    Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
                                </p>
                                <p class="author">- Mark Mathewson, info@business.com</p>
                            </div>
                        </section>
                    </section>                    

                </article><!-- .grid_4 end -->

                <div class="clearfix"></div>

                <!-- .grid_4 start -->
                <article class="grid_4">
                    <!-- .section-title.left start -->
                    <section class="section-title left">
                        <h3>Information Boxes</h3>
                    </section><!-- .section-title.left end -->

                    <!-- infobox start -->
                    <section class="infobox">
                        <p>This is an example of information box</p>
                    </section><!-- infobox end -->

                    <!-- error box start -->
                    <section class="error-box">
                        <p>This is an example of error box</p>
                    </section><!-- error box end -->

                    <!-- success box start -->
                    <section class="success-box">
                        <p>This is an example of success box</p>
                    </section><!-- success box end -->

                    <!-- warning box start -->
                    <section class="warning-box">
                        <p>This is an example of warning box</p>
                    </section><!-- warning box end -->
                </article><!-- .grid_4 end -->

                <!-- .grid_4 start -->
                <article class="grid_4">
                    <!-- .section-title.left start -->
                    <section class="section-title left">
                        <h3>Tabs</h3>
                    </section><!-- .section-title.left end -->

                    <!-- .tabs start -->
                    <ul class="tabs">
                        <li class="active">
                            <a href="#tab1">First</a>
                        </li>
                        <li class="">
                            <a href="#tab2">Second</a>
                        </li>
                        <li class="">
                            <a href="#tab3">Third</a>
                        </li>
                    </ul><!-- .tabs end -->

                    <!-- .tabs-content-wrap start -->
                    <section class="tab-content-wrap">

                        <!-- #tab1 content start -->
                        <div id="tab1" class="tab-content">
                            <p>
                                Integer mollis elementum odio, eget 
                                consectetur arcu condi acm ent um sit amet.
                                Donec eui smod, justo quis vulputate 
                                varius, leo turpis pretium risus, et 
                                molestie mauris juo sit amet.
                                It is a long established fact that a reader
                                will be distracted by the readable content.
                            </p>

                        </div><!-- #tab1 content end -->

                        <!-- tab2 content start -->
                        <div id="tab2" class="tab-content">
                            <p>
                                Integer mollis elementum odio, eget 
                                consectetur arcu condi acm ent um sit amet.
                                Donec eui smod, justo quis vulputate 
                                varius, leo turpis pretium risus, et 
                                molestie mauris juo sit amet.

                            </p>
                        </div><!-- #tab2 content end -->

                        <!-- tab3 content start -->
                        <div id="tab3" class="tab-content">
                            <p>
                                Integer mollis elementum odio, eget 
                                consectetur arcu condi acm ent um sit amet.
                                Donec eui smod, justo quis vulputate 
                                varius, leo turpis pretium risus, et 
                                molestie mauris juo sit amet.
                                It is a long established fact that a reader
                                will be distracted by the readable content 
                                of a page when looking at its layout. 
                        </div><!-- #tab3 content end -->
                    </section><!-- .tabs-content-wrap end -->

                </article><!-- .grid_4 end -->

                <!-- .grid_4 start -->
                <article class="grid_4">
                    <!-- .section-title.left start -->
                    <section class="section-title left">
                        <h3>Tabs with Icons</h3>
                    </section><!-- .section-title.left end -->

                    <!-- .tabs start -->
                    <ul class="tabs">
                        <li class="active">
                            <a href="#tab4">
                                <i class="icon-group"></i>
                                First
                            </a>
                        </li>
                        <li class="">
                            <a href="#tab5">
                                <i class="icon-leaf"></i>
                                Second
                            </a>
                        </li>
                        <li class="">
                            <a href="#tab6">
                                <i class="icon-desktop"></i>
                                Third
                            </a>
                        </li>
                    </ul><!-- .tabs end -->

                    <!-- .tabs-content-wrap start -->
                    <section class="tab-content-wrap">

                        <!-- #tab1 content start -->
                        <div id="tab4" class="tab-content">
                            <p>
                                Integer mollis elementum odio, eget 
                                consectetur arcu condi acm ent um sit amet.
                                Donec eui smod, justo quis vulputate 
                                varius, leo turpis pretium risus, et 
                                molestie mauris juo sit amet.
                                It is a long established fact that a reader
                                will be distracted by the readable content.
                            </p>

                        </div><!-- #tab1 content end -->

                        <!-- tab2 content start -->
                        <div id="tab5" class="tab-content">
                            <p>
                                Integer mollis elementum odio, eget 
                                consectetur arcu condi acm ent um sit amet.
                                Donec eui smod, justo quis vulputate 
                                varius, leo turpis pretium risus, et 
                                molestie mauris juo sit amet.

                            </p>
                        </div><!-- #tab2 content end -->

                        <!-- tab3 content start -->
                        <div id="tab6" class="tab-content">
                            <p>
                                Integer mollis elementum odio, eget 
                                consectetur arcu condi acm ent um sit amet.
                                Donec eui smod, justo quis vulputate 
                                varius, leo turpis pretium risus, et 
                                molestie mauris juo sit amet.
                                It is a long established fact that a reader
                                will be distracted by the readable content 
                                of a page when looking at its layout. 
                        </div><!-- #tab3 content end -->
                    </section><!-- .tabs-content-wrap end -->

                </article><!-- .grid_4 end -->

                <div class="clearfix"></div>

                <!-- .grid_6 start -->
                <article class="grid_6">
                    <!-- .section-title.left start -->
                    <section class="section-title left">
                        <h3>Vertical Tabs</h3>
                    </section><!-- .section-title.left end -->

                    <!-- .tabs start -->
                    <ul class="grid_2 alpha tabs vertical">
                        <li class="active">
                            <a href="#tab7">
                                First section
                            </a>
                        </li>
                        <li class="">
                            <a href="#tab8">
                                Second section
                            </a>
                        </li>
                        <li class="">
                            <a href="#tab9">
                                Third section
                            </a>
                        </li>
                    </ul><!-- .tabs end -->

                    <!-- .tabs-content-wrap vertical start -->
                    <section class="grid_4 omega tab-content-wrap vertical">

                        <!-- #tab1 content start -->
                        <div id="tab7" class="tab-content">
                            <p>
                                Integer mollis elementum odio, eget 
                                consectetur arcu condi acm ent um sit amet.
                                Donec eui smod, justo quis vulputate 
                                varius, leo turpis pretium risus, et 
                                molestie mauris juo sit amet.
                                It is a long established fact that a reader
                                will be distracted by the readable content.
                                Integer mollis elementum odio, eget 
                                consectetur arcu condi acm ent um sit amet.
                            </p>

                        </div><!-- #tab1 content end -->

                        <!-- tab2 content start -->
                        <div id="tab8" class="tab-content">
                            <p>
                                Integer mollis elementum odio, eget 
                                consectetur arcu condi acm ent um sit amet.
                                Donec eui smod, justo quis vulputate 
                                varius, leo turpis pretium risus, et 
                                molestie mauris juo sit amet. It is a long 
                                established fact that a reader
                                will be distracted by the readable content.
                            </p>
                        </div><!-- #tab2 content end -->

                        <!-- tab3 content start -->
                        <div id="tab9" class="tab-content">
                            <p>
                                Integer mollis elementum odio, eget 
                                consectetur arcu condi acm ent um sit amet.
                                Donec eui smod, justo quis vulputate 
                                varius, leo turpis pretium risus, et 
                                molestie mauris juo sit amet.
                                It is a long established fact that a reader
                                will be distracted by the readable content 
                                of a page when looking at its layout. 
                                Lorem ipsum dolor sit amet nec, consectetuer 
                                adipiscing elit. Aenean commodo ligula eget dolor.
                        </div><!-- #tab3 content end -->
                    </section><!-- .tabs-content-wrap .vertical end -->

                </article><!-- .grid_6 end -->

                <!-- .grid_6 start -->
                <article class="grid_6">
                    <!-- .section-title.left start -->
                    <section class="section-title left">
                        <h3>Vertical Tabs with Icons</h3>
                    </section><!-- .section-title.left end -->

                    <!-- .tabs start -->
                    <ul class="grid_2 alpha tabs vertical">
                        <li class="active">
                            <a href="#tab10">
                                <i class="icon-desktop"></i>
                                First section
                            </a>
                        </li>
                        <li class="">
                            <a href="#tab11">
                                <i class="icon-leaf"></i>
                                Second section
                            </a>
                        </li>
                        <li class="">
                            <a href="#tab12">
                                <i class="icon-globe"></i>
                                Third section
                            </a>
                        </li>
                    </ul><!-- .tabs end -->

                    <!-- .tabs-content-wrap vertical start -->
                    <section class="grid_4 omega tab-content-wrap vertical">

                        <!-- #tab1 content start -->
                        <div id="tab10" class="tab-content">
                            <p>
                                Integer mollis elementum odio, eget 
                                consectetur arcu condi acm ent um sit amet.
                                Donec eui smod, justo quis vulputate 
                                varius, leo turpis pretium risus, et 
                                molestie mauris juo sit amet.
                                It is a long established fact that a reader
                                will be distracted by the readable content.
                                Integer mollis elementum odio, eget 
                                consectetur arcu condi acm ent um sit amet.
                            </p>

                        </div><!-- #tab1 content end -->

                        <!-- tab2 content start -->
                        <div id="tab11" class="tab-content">
                            <p>
                                Integer mollis elementum odio, eget 
                                consectetur arcu condi acm ent um sit amet.
                                Donec eui smod, justo quis vulputate 
                                varius, leo turpis pretium risus, et 
                                molestie mauris juo sit amet. It is a long 
                                established fact that a reader
                                will be distracted by the readable content.
                            </p>
                        </div><!-- #tab2 content end -->

                        <!-- tab3 content start -->
                        <div id="tab12" class="tab-content">
                            <p>
                                Integer mollis elementum odio, eget 
                                consectetur arcu condi acm ent um sit amet.
                                Donec eui smod, justo quis vulputate 
                                varius, leo turpis pretium risus, et 
                                molestie mauris juo sit amet.
                                It is a long established fact that a reader
                                will be distracted by the readable content 
                                of a page when looking at its layout. 
                                Lorem ipsum dolor sit amet nec, consectetuer 
                                adipiscing elit. Aenean commodo ligula eget dolor.
                        </div><!-- #tab3 content end -->
                    </section><!-- .tabs-content-wrap .vertical end -->
                </article><!-- .grid_6 end -->

                <div class="clearfix"></div>

                <!-- .grid_4 start -->
                <article class="grid_4">
                    <!-- .section-title.left start -->
                    <section class="section-title left">
                        <h3>Accordion</h3>
                    </section><!-- .section-title.left end -->

                    <!-- .accordion start -->
                    <article class="accordion">                      

                        <section class="accordion-content-wrapp">
                            <div class="title active"><a href="#">At vero eos et accusamus et iusto itiis</a></div>
                            <div class="content">
                                <p>
                                    It is a long established fact that a 
                                    reader will be distracted by the 
                                    readable content of a page when looking 
                                    at its layout.
                            </div>
                        </section>

                        <section class="accordion-content-wrapp">
                            <div class="title"><a href="#">Sed ut perspiciatis unde omnis iste</a></div>
                            <div class="content">
                                <p>
                                    It is a long established fact that a 
                                    reader will be distracted by the 
                                    readable content of a page when looking 
                                    at its layout. The point of using Lorem 
                                    Ipsum is that it look like readable 
                                    English. 
                                </p>
                            </div>
                        </section>
                    </article><!-- .accordion end -->   
                </article><!-- .grid_4 end -->

                <!-- .grid_4 start -->
                <article class="grid_4">
                    <!-- .section-title.left start -->
                    <section class="section-title left">
                        <h3>Blockquote</h3>
                    </section><!-- .section-title.left end -->

                    <blockquote>
                        Quisque odio urna, ultrices non volutpat 
                        lacinia, scelerisque sit amet justo. Quisque 
                        venenatis sapien id eros pulvinar sit amet 
                        posuere lacus gravida. Aenean accumsan placerat 
                        nulla, dictum semper.

                        <cite>- Mathew, business.com</cite>
                    </blockquote>
                </article><!-- .grid_4 end -->

                <!-- .grid_4 start -->
                <article class="grid_4">
                    <!-- .section-title.left start -->
                    <section class="section-title left">
                        <h3>Blockquote Alternative</h3>
                    </section><!-- .section-title.left end -->

                    <blockquote class="style2">
                        Quisque odio urna, ultrices non volutpat 
                        lacinia, scelerisque sit amet justo. Quisque 
                        venenatis sapien id eros pulvinar sit amet 
                        posuere lacus gravida. Aenean accumsan placerat 
                        nulla, dictum semper.

                        <cite>- Mathew, business.com</cite>
                    </blockquote>
                </article><!-- .grid_4 end -->

                <!-- .grid_12 start -->
                <article class="grid_12 buttons">
                    <!-- .section-title.left start -->
                    <section class="section-title left">
                        <h3>Buttons</h3>
                    </section><!-- .section-title.left end -->

                    <div class="grid_2 alpha">
                        <a class="btn-big red" href="#">
                            <span>BIG BUTTON</span>
                        </a>
                    </div>

                    <div class="grid_2">
                        <a class="btn-big orange" href="#">
                            <span>BIG BUTTON</span>
                        </a>
                    </div>

                    <div class="grid_2">
                        <a class="btn-big green" href="#">
                            <span>BIG BUTTON</span>
                        </a>
                    </div>

                    <div class="grid_2">
                        <a class="btn-big blue" href="#">
                            <span>BIG BUTTON</span>
                        </a>
                    </div>

                    <div class="grid_2">
                        <a class="btn-big yellow" href="#">
                            <span>BIG BUTTON</span>
                        </a>
                    </div>

                    <div class="grid_2 omega">
                        <a class="btn-big white" href="#">
                            <span>BIG BUTTON</span>
                        </a>
                    </div>

                    <div class="clearfix"></div>

                    <div class="grid_2 alpha">
                        <a class="btn-medium red" href="#">
                            <span>MEDIUM</span>
                        </a>
                    </div>

                    <div class="grid_2">
                        <a class="btn-medium orange" href="#">
                            <span>MEDIUM</span>
                        </a>
                    </div>

                    <div class="grid_2">
                        <a class="btn-medium green" href="#">
                            <span>MEDIUM</span>
                        </a>
                    </div>

                    <div class="grid_2">
                        <a class="btn-medium blue" href="#">
                            <span>MEDIUM</span>
                        </a>
                    </div>

                    <div class="grid_2">
                        <a class="btn-medium yellow" href="#">
                            <span>MEDIUM</span>
                        </a>
                    </div>

                    <div class="grid_2 omega">
                        <a class="btn-medium white" href="#">
                            <span>MEDIUM</span>
                        </a>
                    </div>
                </article><!-- .grid_12 end -->

                <!-- .grid_12 start -->
                <article class="grid_12">
                    <!-- .section-title.left start -->
                    <section class="section-title left">
                        <h1>Heading 1 Full Column</h1>
                    </section><!-- .section-title.left end -->

                    <p>
                        There are many variations of passages of Lorem Ipsum 
                        available, but the majority have suffered alteration in 
                        some form, by injected humour, or randomised words which 
                        don't look even slightly believable. If you are going to 
                        use a passage of Lorem Ipsum, you need to be sure there 
                        isn't anything embarrassing hidden in the middle of 
                        text. There are many variations of passages of Lorem 
                        Ipsum available, but the majority have suffered 
                        alteration in some form, by injected humour.
                    </p>
                </article><!-- .grid_12 -->

                <!-- .grid_6 start -->
                <article class="grid_6">
                    <!-- .section-title.left start -->
                    <section class="section-title left">
                        <h2>Heading 2, Column 1/2</h2>
                    </section><!-- .section-title.left end -->

                    <p>
                        There are many variations of passages of Lorem Ipsum 
                        available, but the majority have suffered alteration in 
                        some form, by injected humour, or randomised words which 
                        don't look even slightly believable. If you are going to 
                        use a passage of Lorem Ipsum, you need to be sure there 
                        isn't anything embarrassing hidden in the middle of 
                        text. There are many variations of passages of Lorem 
                        Ipsum available, but the majority have suffered 
                        alteration in some form, by injected humour.
                    </p>
                </article><!-- .grid_6 end -->

                <!-- .grid_6 start -->
                <article class="grid_6">
                    <!-- .section-title.left start -->
                    <section class="section-title left">
                        <h2>Heading 2, Column 1/2 </h2>
                    </section><!-- .section-title.left end -->

                    <p>
                        There are many variations of passages of Lorem Ipsum 
                        available, but the majority have suffered alteration in 
                        some form, by injected humour, or randomised words which 
                        don't look even slightly believable. If you are going to 
                        use a passage of Lorem Ipsum, you need to be sure there 
                        isn't anything embarrassing hidden in the middle of 
                        text. There are many variations of passages of Lorem 
                        Ipsum available, but the majority have suffered 
                        alteration in some form, by injected humour.
                    </p>
                </article><!-- .grid_6 end -->

                <div class="clearfix"></div>

                <!-- grid_4 start -->
                <article class="grid_4">
                    <!-- .section-title.left start -->
                    <section class="section-title left">
                        <h3>Heading 3, Column 1/3</h3>
                    </section><!-- .section-title.left end -->

                    <p>
                        There are many variations of passages of Lorem Ipsum 
                        available, but the majority have suffered alteration 
                        in some form, by injected humour, or randomised words. 
                    </p>
                </article><!-- grid_4 end -->

                <!-- grid_4 start -->
                <article class="grid_4">
                    <!-- .section-title.left start -->
                    <section class="section-title left">
                        <h3>Heading 3, Column 1/3</h3>
                    </section><!-- .section-title.left end -->

                    <p>
                        There are many variations of passages of Lorem Ipsum 
                        available, but the majority have suffered alteration 
                        in some form, by injected humour, or randomised words. 
                    </p>
                </article><!-- grid_4 end -->

                <!-- grid_4 start -->
                <article class="grid_4">
                    <!-- .section-title.left start -->
                    <section class="section-title left">
                        <h3>Heading 3, Column 1/3</h3>
                    </section><!-- .section-title.left end -->

                    <p>
                        There are many variations of passages of Lorem Ipsum 
                        available, but the majority have suffered alteration 
                        in some form, by injected humour, or randomised words. 
                    </p>
                </article><!-- grid_4 end -->

                <div class="clearfix"></div>

                <!-- .grid_3 start -->
                <article class="grid_3">
                    <!-- .section-title.left start -->
                    <section class="section-title left">
                        <h4>Heading 4, Column 1/4</h4>
                    </section><!-- .section-title.left end -->

                    <p>
                        There are many variations of passages of Lorem Ipsum 
                        available, but the majority have suffered alteration 
                        in some form, by injected humour, or randomised words. 
                    </p>
                </article><!-- .grid_3 end -->

                <!-- .grid_3 start -->
                <article class="grid_3">
                    <!-- .section-title.left start -->
                    <section class="section-title left">
                        <h4>Heading 4, Column 1/4</h4>
                    </section><!-- .section-title.left end -->

                    <p>
                        There are many variations of passages of Lorem Ipsum 
                        available, but the majority have suffered alteration 
                        in some form, by injected humour, or randomised words. 
                    </p>
                </article><!-- .grid_3 end -->

                <!-- .grid_3 start -->
                <article class="grid_3">
                    <!-- .section-title.left start -->
                    <section class="section-title left">
                        <h4>Heading 4, Column 1/4</h4>
                    </section><!-- .section-title.left end -->

                    <p>
                        There are many variations of passages of Lorem Ipsum 
                        available, but the majority have suffered alteration 
                        in some form, by injected humour, or randomised words. 
                    </p>
                </article><!-- .grid_3 end -->

                <!-- .grid_3 start -->
                <article class="grid_3">
                    <!-- .section-title.left start -->
                    <section class="section-title left">
                        <h4>Heading 4, Column 1/4</h4>
                    </section><!-- .section-title.left end -->

                    <p>
                        There are many variations of passages of Lorem Ipsum 
                        available, but the majority have suffered alteration 
                        in some form, by injected humour, or randomised words. 
                    </p>
                </article><!-- .grid_3 end -->

                <div class="clearfix"></div>

                <!-- .grid_4 start -->
                <article class="grid_4">
                    <!-- .section-title.left start -->
                    <section class="section-title left">
                        <h5>Heading 5, Column 1/3</h5>
                    </section><!-- .section-title.left end -->

                    <p>
                        There are many variations of passages of Lorem Ipsum 
                        available, but the majority have suffered alteration in 
                        some form, by injected humour, or randomised words which 
                        don't look even slightly believable. If you are going to 
                        use humour.
                    </p>
                </article><!-- .grid_4 end -->

                <!-- .grid_8 start -->
                <article class="grid_8">
                    <!-- .section-title.left start -->
                    <section class="section-title left">
                        <h5>Heading 5, Column 2/3</h5>
                    </section><!-- .section-title.left end -->

                    <p>
                        There are many variations of passages of Lorem Ipsum 
                        available, but the majority have suffered alteration in 
                        some form, by injected humour, or randomised words which
                        don't look even slightly believable. If you are going 
                        to use a passage of Lorem Ipsum, you need to be sure 
                        there isn't anything embarrassing hidden in the middle 
                        of text. There are many variations of passages of Lorem 
                        Ipsum available, but the majority have suffered 
                        alteration in some form, by injected humour.
                    </p>
                </article><!-- .grid_8 end -->

                <div class="clearfix"></div>

                <!-- .grid_8 start -->
                <article class="grid_8">
                    <!-- .section-title.left start -->
                    <section class="section-title left">
                        <h6>Heading 6, Column 2/3</h6>
                    </section><!-- .section-title.left end -->

                    <p>
                        There are many variations of passages of Lorem Ipsum 
                        available, but the majority have suffered alteration in 
                        some form, by injected humour, or randomised words which
                        don't look even slightly believable. If you are going 
                        to use a passage of Lorem Ipsum, you need to be sure 
                        there isn't anything embarrassing hidden in the middle 
                        of text. There are many variations of passages of Lorem 
                        Ipsum available, but the majority have suffered 
                        alteration in some form, by injected humour.
                    </p>
                </article><!-- .grid_8 end -->

                <!-- .grid_4 start -->
                <article class="grid_4">
                    <!-- .section-title.left start -->
                    <section class="section-title left">
                        <h6>Heading 6, Column 1/3</h6>
                    </section><!-- .section-title.left end -->

                    <p>
                        There are many variations of passages of Lorem Ipsum 
                        available, but the majority have suffered alteration in 
                        some form, by injected humour, or randomised words which 
                        don't look even slightly believable. If you are going to 
                        use humour.
                    </p>
                </article><!-- .grid_4 end -->

            </div><!-- .container_12 end -->

        </section><!-- #content-wrapper end -->

        <!-- #footer-wrapper start -->
        <div id="footer-wrapper" class="clearfix">

            <!-- #footer -->
            <footer id="footer" class="container_12">

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">

                    <!-- .widget.widget_text start -->
                    <li class="widget widget_text">

                        <section class="carousel-article">
                            <img src="img/red/logo-footer.png" alt="logo" />

                            <br /><br />

                            <ul id="foo1" class="carousel-li">
                                <li>
                                    <p>
                                        We proudly present you Metropolis, perfectly 
                                        clean and original theme. This is sliding 
                                        article, yo you can put more info about your 
                                        company.  
                                    </p>
                                </li>

                                <li>
                                    <p>
                                        Sed ut perspiciatis unde omnis iste natus error 
                                        sit voluptatem accusantium doloremque laudantium, 
                                        totam rem aperiam, eaque ipsa quae ab illo 
                                        inventore veritatis et quasi. 
                                    </p>
                                </li>

                                <li>
                                    <p>
                                        Sed ut perspiciatis unde omnis iste natus error 
                                        sit voluptatem accusantium doloremque laudantium, 
                                        totam rem aperiam, eaque ipsa quae ab illo 
                                        inventore veritatis et quasi. 
                                    </p>
                                </li>
                            </ul>

                            <div class="clearfix"></div>

                            <div class="carousel-pagination" id="foo1_pag"></div>
                        </section>

                    </li><!-- .widget.widget_text end -->
                </ul><!-- .footer-widget-container end -->

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">
                    <!-- .widget pi_recent_posts start -->
                    <li class="widget pi_recent_posts">
                        <div class="title">
                            <h5>latest posts</h5>
                        </div>

                        <ul class="footer-blog">
                            <li>
                                <div class="meta">
                                    <a class="icon-edit"></a>
                                </div>

                                <div class="post">
                                    <a href="blog-single.html"> Nam libero tempore, </a>
                                    <p class="info">26 MARCH 2013, <a href="blog-single.html">0 COMMENTS</a></p>
                                </div>
                            </li>

                            <li>
                                <div class="meta">
                                    <a class="icon-link"></a>
                                </div>

                                <div class="post">
                                    <a href="blog-single.html">Temporibus autem quibusdam, </a>
                                    <p class="info">26 MARCH 2013, <a href="blog-single.html">2 COMMENTS</a></p>
                                </div>
                            </li>

                            <li>
                                <div class="meta">
                                    <a class="icon-camera"></a>
                                </div>

                                <div class="post">
                                    <a href="blog-single.html">Excepteur sint occaecat cupid, </a>
                                    <p class="info">26 MARCH 2013, <a href="blog-single.html">2 COMMENTS</a></p>
                                </div>
                            </li>
                        </ul>


                    </li><!-- .widget pi_recent_posts end -->
                </ul><!-- .footer-widget-container end -->

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">

                    <!-- .widget.widget_text start -->
                    <li class="widget widget_text">
                        <div class="title">
                            <h5>get in touch</h5>
                        </div>
                        <p>
                            If you have any questions don't hesitate to contact us
                        </p>

                        <br />

                        <ul class="contact-info">
                            <li class='address'>
                                <p>Address: Some street 123, Manhattan, New York, USA</p>
                            </li>

                            <li class="phone">
                                <p>Telephone: +00 123 5874</p>
                            </li>

                            <li class="mail">
                                <p>Email: <a href='mailto:sales-info@business.com'>info@business.com</a></p>
                            </li>
                        </ul>
                    </li><!-- .widget.widget_text end -->
                </ul><!-- .footer-widget-container end -->

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">

                    <!-- .widget.widget_text start -->
                    <li class="widget widget_text">
                        <div class="title">
                            <h5>newsletter subscribe</h5>
                        </div>

                        <p>
                            Stay up to date with latest news from our company. 
                            We promise we won’t spam you.
                        </p>

                        <br />

                        <form class="newsletter">
                            <input type="email" class="email" placeholder="Enter your email here...">
                            <input type ="submit" class="submit" value="SEND">
                        </form>
                    </li><!-- .widget.widget_text end -->

                </ul><!-- footer-widget-container end -->
            </footer><!-- #footer end -->

            <!-- .container_12.copyright-container start -->
            <div class="container_12 copyright-container">

                <!-- .grid_12 start -->
                <div class="grid_12">                  

                    <div class="grid_6 alpha">
                        <p>
                            Copyright Metropolis 2013. Designed by Pixel industry. All rights reserved.
                        </p>
                    </div>

                    <div class="grid_6 omega">
                        <ul class="footer-breadcrumbs">
                            <li>
                                <a href="index.html">Home</a>
                            </li>

                            <li>
                                <a href="about.html">About</a>
                            </li>

                            <li>
                                <a href="portfolio1.html">Portfolio</a>
                            </li>

                            <li>
                                <a href="blog.html">Blog</a>
                            </li>

                            <li>
                                <a href="contact.html">Contact</a>
                            </li>
                        </ul>
                    </div><!-- .grid_6 omega end -->
                </div><!-- .grid_12 end -->
            </div><!-- .container_12.copyright-container end -->
        </div><!-- #footer-wrapper end -->

        <!-- scripts -->
        <script  src="js/jquery-1.8.3.js"></script> <!-- jQuery library -->  
        <script  src="js/jquery.placeholder.min.js"></script><!-- jQuery placeholder fix for old browsers -->
        <script  src="js/jquery.carouFredSel-6.0.0-packed.js"></script><!-- CarouFredSel carousel plugin -->
        <script  src="js/jquery.touchSwipe-1.2.5.js"></script><!-- support for touch swipe on mobile devices -->  
        <script  src="style-switcher/styleSwitcher.js"></script><!-- Style Switcher plugin -->
        <script  src="js/include.js"></script> <!-- jQuery custom options -->

        <script>
            /* <![CDATA[ */

            // NEWSLETTER FORM AJAX SUBMIT
            $('.newsletter .submit').on('click', function(event) {
                event.preventDefault();
                var email = $('.email').val();
                var form_data = new Array({'Email': email});
                $.ajax({
                    type: 'POST',
                    url: "contact.php",
                    data: ({'action': 'newsletter', 'form_data': form_data})
                }).done(function(data) {
                    alert(data);
                });
            });

            // TESTIMONIAL CAROUSEL
            $("#foo2").carouFredSel({
                auto: true,
                scroll: 1,
                swipe: {
                    ontouch: true,
                    onMouse: true
                },
                width: 'variable',
                height: 'variable',
                items: {
                    width: 'auto',
                    visible: 1
                }
            });

            // FOOTER CAROUSEL ARTICLE 
            $("#foo1").carouFredSel({
                auto: true,
                scroll: 1,
                pagination: "#foo1_pag",
                swipe: {
                    ontouch: true,
                    onMouse: true
                },
                width: 'variable',
                height: 'variable',
                items: {
                    width: 'auto',
                    visible: 1
                }
            });

            $('.testimonials-alternative-nav').on('click', 'a', function(e) {
                e.preventDefault();
                var $current = $(this);
                $('.testimonials-alternative-nav a').removeClass();
                $('.testimonials-alternative-content .content').hide();
                $current.addClass('active');
                var contentID = $current.attr('href');
                $('.testimonials-alternative-content').find(contentID).fadeIn();
            });

            /* ]]> */
        </script>
    </body>
</html>
